<template>
	<u-popup mode="bottom" v-model="show" :closeable="true" @close="$emit('input','')">
		<view class="tc p30 border-b fs30 fw-500 color-000">支付</view>
		<view class="p30 color-000">
			<view class="tc fs50 pt80 pb70">¥ {{value.money}}</view>
			<view class="pt26 pb26 border-b flex row-between" @tap='type=item.type' v-for="(item,index) in list"
				:key="index">
				<view class="flex">
					<u-icon :name="item.icon" :color="item.color" size="50"></u-icon>
					<view class="fs24 fw-500 ml20">{{item.name}}</view>
				</view>
				<u-icon name="checkmark-circle-fill" :color="$zs" v-if="type==item.type" size="40"></u-icon>
				<u-icon name="checkmark-circle" v-else color="#ccc" size="40"></u-icon>
			</view>
			<view class="h60"></view>
			<u-button type="warning" ripple shape="circle" @click="submit">立即支付
			</u-button>
		</view>
	</u-popup>
</template>

<script>
	//<payment v-model="payData" depositShow @success="" />
	// this.payData={
	// 	enroll_id:enroll_id,
	// 	api:'/api/shopapp.activity/advertPay',
	// 	money:this.data.price,
	// }
	// this.payData = {
	// 	...res.data,
	// 	target: res.data.trade_sn,
	// 	money: res.data.total_amount,
	// 	target_type: res.data.target_type,
	// }
	export default {
		name: "payment",
		props: {
			value: {
				default: ''
			},
			depositShow: {
				default: false
			}
		},
		computed: {
			method() { ////支付方式：app=APP，wap=网页，miniapp=小程序，mp=微信公众平台
				// #ifdef APP-PLUS
				return 'app'
				// #endif
				// #ifdef MP-WEIXIN
				return 'miniapp'
				// #endif
				// #ifdef H5
				return 'wap'
				let ua = window.navigator.userAgent.toLowerCase(); //判断的登录环境
				if (ua.indexOf('micromessenger') != -1) { //如果是微信
					return 'mp'
				}
				// #endif
			},
			list() {
				let arr = []
				if (this.depositShow) {
					arr.push({
						"name": '余额',
						icon: 'rmb-circle-fill',
						color: '#ffbf2c',
						type: 'deposit',
					})
					this.type = 'deposit'
				}
				arr.push(
					// #ifdef MP-WEIXIN ||H5
					{
						"name": '微信小程序',
						icon: 'weixin-circle-fill',
						color: '#6bcc03',
						type: 'miniapp'
					},
					// #endif
					// #ifdef APP-PLUS ||H5
					{
						"name": '微信',
						icon: 'weixin-circle-fill',
						color: '#2aae67',
						type: 'wechat'
					}, {
						"name": '支付宝',
						icon: 'zhifubao-circle-fill',
						color: '#33c2fd',
						type: 'alipay'
					},
					// #endif
				)
				return arr
			}
		},
		data() {
			return {
				show: false, //弹窗开关
				type: 'wechat',
			};
		},
		watch: {
			type(val) {
				this.$emit('type', val)
			},
			value(val) {
				console.log(val);
				if (val) {
					this.show = true
				} else {
					this.show = false
				}
			},
		},
		methods: {
			submit() {
				let that = this
				let {
					api,
					// money,
					...params
				} = this.value

				params.pay_type = this.type
				params.method = this.method
				this.$request(this.value.api || '/payment/pay/pay', params).then(res => {
					this.show = false //关闭选择支付弹窗支付
					let payData = ''
					switch (params.pay_type) {
						case 'deposit': //余额
							this.$msg(res.msg)
							this.pay_success()
							return
							break;
						case 'wechat': //app微信
							payData.provider = 'wxpay'
							payData.orderInfo = JSON.parse(res.data.payParams)
							break;
						case 'alipay': //app支付宝
							payData.provider = 'alipay'
							payData.orderInfo = res.data.payParams
							break;
						case 'miniapp': //微信小程序
							payData = res.data.payParams
							break;
						default: //其他
							payData = res.data.payParams
							break;
					}
					uni.requestPayment({
						...payData,
						success: function(res) {
							that.$msg('支付成功')
							that.pay_success()
						},
						fail: function(err) {
							that.$msg('取消支付')
						},
					});
				})
			},
			pay_success() {
				this.$emit('success', '')
			},
		}
	}
</script>

<style lang="scss">

</style>
